<template>
    <div class="menu">
        <div class="logo">后台管理系统</div>
        <div class="menu-list">
            <Menu theme="dark" :active-name="activeName" width="auto" @on-select="changeMenu">
                <MenuItem :name="item.path" v-for="(item, index) in menuList" :key="index">
                    <img :src="item.url" height="17" width="18" alt="" style="vertical-align: middle; margin-right: 5px;"> {{item.title}}
                </MenuItem>
            </Menu>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            activeName: 'house',
            menuList: [
                { title: '房源管理', path: 'house', url: require('../assets/images/fangyuan_n.png')},
                { title: '已入住企业管理', path: 'alreadyCompany', url: require('../assets/images/qiye_n.png')},
                { title: '广告管理', path: 'advertManage', url: require('../assets/images/guanggao_n.png')}
            ]
        };
    },
    mounted(){
        this.activeName = this.$route.name
    },
    methods: {
        changeMenu(path){
            this.$router.push({
                name: path
            })
        },
    }
};
</script>

<style lang="less" scoped>
    .menu {
        .logo {
            height: 70px;
            text-align: center;
            padding-top: 25px;
            color: #fff;
            font-size: 18px;
        }
    }
</style>
